<template>
  <div class="page-layout" style="background: #ffffff">
    <f-form-layout
      @ValidateFailed="onValidateFailed"
      class="mb20"
      ref="form"
      layout="vertical"
      :model="model"
      :columns="columns"
      @submit="submit">
      <f-button htmlType="submit">htmlFor提交</f-button>
      <!-- 不要使用 ，使用导出resetFields函数-->
      <!-- <f-button htmlType="reset">Reset</f-button> -->
    </f-form-layout>

    <f-button type="primary" @click="handleForm">手动调用提交</f-button>
    <!-- 重置model到初始状态 -->
    <f-button class="ml20" :loading="loading" @click="reset">Reset</f-button>
  </div>
</template>

<script setup lang="ts">
import { Tag } from 'ant-design-vue';
import { h, watch, ref } from 'vue';
import { useRequest } from '../../packages/hooks';
const outside = ref(1);
const form = ref();
const label = ref(1);
const model = ref({});
const columns = ref([
  {
    label: '字段1',
    field: 'n1',
    type: 'select',
    props: {
      options: [
        { field: 'abc', label: '12', value: '1' },
        { field: 'abc1', label: '13', value: '2' },
        { field: 'abc2', label: '14', value: '3' },
        { field: 'abc3', label: '15', value: '4' }
      ]
    },
    span: 8
  },
  {
    type: 'form-edit-table',
    field: 'table',
    props: {
      title: '我是分组',
      columns: [
        { editType: 'input', title: '12312', field: '123' },
        { editType: 'input', title: '12312', field: '1231' },
        { editType: 'input', title: '12312', field: '12312' },
        { editType: 'input', title: '12312', field: '1233' }
      ]
    }
  },
  {
    type: 'date-range-three',
    field: 'beginDate',
    label: '执行时间',
    props: {
      placeholder: ['开始时间', '结束时间'],
      showTime: { format: 'HH:mm' },
      format: 'YYYY-MM-DD HH:mm',
      valueFormat: 'YYYY-MM-DD HH:mm',
      isDefault: true
    }
  },
  {
    destroyOnHide: true,
    show: (data) => data.n1 == '1',
    label: '字段12',
    props: (data) => {
      console.log('执行');
      return {
        class: 'hahah',
        placeholder: data.n1
      };
    },
    field: 'n12',
    span: 8
  },
  {
    label: '字段13',
    field: 'n13',
    span: 8,
    control: (data) => ({ n14: data.n13 })
  },
  { label: '字段14', field: 'n14', span: 8 },
  { label: '字段15', field: 'n15', span: 8 },
  { label: '字段16', field: 'n16', span: 8 },
  // 阻止下方向上面流动
  { span: 24 },
  { label: '字段17', field: 'n17', span: 8 },
  { label: '字段18', field: 'n18', span: 8 },
  { label: '字段19', field: 'n19', span: 8 }
]);
function onValidateFailed(e) {
  console.error('errors:', e);
}
function submit(data) {
  console.log(data);
  console.log(form.value?.getExistFieldsValue());
}
async function handleForm() {
  const value = await form.value?.validate();
  console.log(value);
}
const results = useRequest(
  [
    () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(1);
        }, 1000);
      });
    },
    () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('errormsg');
        }, 1200);
      });
    }
  ],
  {
    success: (res) => {
      console.log(res);
    },
    error: (e) => {
      console.error(e);
    }
  }
);
function reset() {
  results
    .sendRequest()
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      console.log(e);
    });
}
</script>

<style lang="scss">
body {
  background: #f5f5f5;
}
.page-layout {
  background: #f5f5f5;
  .formlayout-group {
    background: #ffffff;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 8px;
  }
}
</style>
